---
{
	"title": "Tabbed Interface",
	"language": "en",
	"category": "Plugins",
	"description": "Dynamically stacks multiple sections of content, transforming them into a tabbed interface.",
	"tag": "tabs",
	"parentdir": "tabs",
	"altLangPrefix": "tabs",
	"dateModified": "2025-10-14"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>Dynamically stacks multiple sections of content, transforming them into a tabbed interface.</p>
</section>

<section>
	<h2>Example 1</h2>
	<p>With session storage to remember last tab viewed. (Default behaviour)</p>
	<div class="wb-tabs">
		<div class="tabpanels">
			<details id="details-panel1">
				<summary>Example 1</summary>
				<p>
				From time immemorial the Norsemen <a href="#details-panel3">Example 3<br>(line 2)</a> were among the most daring and
				skilful mariners ever known. They built great wooden boats with tall,
				sweeping bows and sterns. These ships, though open and without decks,
				were yet stout and seaworthy. Their remains have been found, at times
				lying deeply buried under the sand and preserved almost intact. One
				such vessel, discovered on the shore of Denmark, measured 72 feet in
				length. Another Viking ship, which was dug up in Norway, and which is
				preserved in the museum at Christiania, was 78 feet long and 17 feet
				wide. One of the old Norse sagas, or stories, tells how King Olaf
				Tryggvesson built a ship, the keel of which, as it lay on the grass,
				was 74 ells long; in modern measure, it would be a vessel of about 942
				tons burden. Even if we make allowance for the exaggeration or
				ignorance of the writer of the saga, there is still a vast contrast
				between this vessel and the little ship Centurion in which Anson sailed
				round the world.
				</p>
			</details>
			<details id="details-panel2" open="open">
				<summary>Example 2</summary>
				<p>
				It is needless, however, to prove that the Norsemen could have reached
				America in their ships. The voyages from Iceland to Greenland which we
				know they made continually for four hundred years were just as arduous
				as a further voyage from Greenland to the coast of Canada.
				</p>
			</details>
			<details id="details-panel3">
				<summary>Example 3<br>(line 2)</summary>
				<p>
				The story of the Norsemen runs thus. Towards the end of the ninth
				century, or nearly two hundred years before the Norman conquest, there
				was a great exodus or outswarming of the Norsemen from their original
				home in Norway. A certain King Harold had succeeded in making himself
				supreme in Norway, and great numbers of the lesser chiefs or jarls
				preferred to seek new homes across the seas rather than submit to his
				rule. So they embarked with their seafaring followers—Vikings, as we
				still call them—often, indeed, with their wives and families, in great
				open ships, and sailed away, some to the coast of England, others to
				France, and others even to the Mediterranean, where they took service
				under the Byzantine emperors. But still others, loving the cold rough
				seas of the north, struck westward across the North Sea and beyond the
				coasts of Scotland till they reached Iceland. This was in the year 874.
				Here they made a settlement that presently grew to a population of
				fifty thousand people, having flocks and herds, solid houses of stone,
				and a fine trade in fish and oil with the countries of Northern Europe.
				These settlers in Iceland attained to a high standard of civilization.
				They had many books, and were fond of tales and stories, as are all
				these northern peoples who spend long winter evenings round the
				fireside. Some of the sagas, or stories, which they told were true
				accounts of the voyages and adventures of their forefathers; others
				were fanciful stories, like our modern romances, created by the
				imagination; others, again, were a mixture of the two. Thus it is
				sometimes hard to distinguish fact and fancy in these early tales of
				the Norsemen. We have, however, means of testing the stories. Among the
				books written in Iceland there was one called the 'National Name-Book,'
				in which all the names of the people were written down, with an account
				of their forefathers and of any notable things which they had done.
				</p>
			</details>
		</div>
	</div>

	<p class="mrgn-tp-md"><a href="#details-panel3" class="wb-tabs-ext">Show the third panel</a></p>

	<details class="mrgn-bttm-md">
		<summary>View code</summary>
		<pre><code>&lt;div class=&quot;wb-tabs&quot;&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;details id=&quot;details-panel1&quot;&gt;
			&lt;summary&gt;Example 1&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		&lt;details id=&quot;details-panel2&quot; open=&quot;open&quot;&gt;
			&lt;summary&gt;Example 2&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		...
	&lt;/div&gt;

	&lt;p class="mrgn-tp-md"&gt;&lt;a href="#details-panel3" class="wb-tabs-ext"&gt;Show the third panel&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;</code></pre>
	</details>

	<h2>Example 2</h2>
	<p>With ignore-session class.  This will prevent the last selected tab from being remembered at a subsequent page load. (With class or <code>data-wb-tabs</code> attribute.)</p>
	<div class="wb-tabs ignore-session">
		<div class="tabpanels">
			<details id="details-panel10">
				<summary>Example 1</summary>
				<p>
				From time immemorial the Norsemen <a href="#details-panel30">Example 3</a> were among the most daring and
				skilful mariners ever known. They built great wooden boats with tall,
				sweeping bows and sterns. These ships, though open and without decks,
				were yet stout and seaworthy. Their remains have been found, at times
				lying deeply buried under the sand and preserved almost intact. One
				such vessel, discovered on the shore of Denmark, measured 72 feet in
				length. Another Viking ship, which was dug up in Norway, and which is
				preserved in the museum at Christiania, was 78 feet long and 17 feet
				wide. One of the old Norse sagas, or stories, tells how King Olaf
				Tryggvesson built a ship, the keel of which, as it lay on the grass,
				was 74 ells long; in modern measure, it would be a vessel of about 942
				tons burden. Even if we make allowance for the exaggeration or
				ignorance of the writer of the saga, there is still a vast contrast
				between this vessel and the little ship Centurion in which Anson sailed
				round the world.
				</p>
			</details>
			<details id="details-panel20">
				<summary>Example 2</summary>
				<p>
				It is needless, however, to prove that the Norsemen could have reached
				America in their ships. The voyages from Iceland to Greenland which we
				know they made continually for four hundred years were just as arduous
				as a further voyage from Greenland to the coast of Canada.
				</p>
				<details>
					<summary>Test</summary>
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?</p>
				</details>
			</details>
			<details id="details-panel30">
				<summary>Example 3</summary>
				<p>
				The story of the Norsemen runs thus. Towards the end of the ninth
				century, or nearly two hundred years before the Norman conquest, there
				was a great exodus or outswarming of the Norsemen from their original
				home in Norway. A certain King Harold had succeeded in making himself
				supreme in Norway, and great numbers of the lesser chiefs or jarls
				preferred to seek new homes across the seas rather than submit to his
				rule. So they embarked with their seafaring followers—Vikings, as we
				still call them—often, indeed, with their wives and families, in great
				open ships, and sailed away, some to the coast of England, others to
				France, and others even to the Mediterranean, where they took service
				under the Byzantine emperors. But still others, loving the cold rough
				seas of the north, struck westward across the North Sea and beyond the
				coasts of Scotland till they reached Iceland. This was in the year 874.
				Here they made a settlement that presently grew to a population of
				fifty thousand people, having flocks and herds, solid houses of stone,
				and a fine trade in fish and oil with the countries of Northern Europe.
				These settlers in Iceland attained to a high standard of civilization.
				They had many books, and were fond of tales and stories, as are all
				these northern peoples who spend long winter evenings round the
				fireside. Some of the sagas, or stories, which they told were true
				accounts of the voyages and adventures of their forefathers; others
				were fanciful stories, like our modern romances, created by the
				imagination; others, again, were a mixture of the two. Thus it is
				sometimes hard to distinguish fact and fancy in these early tales of
				the Norsemen. We have, however, means of testing the stories. Among the
				books written in Iceland there was one called the 'National Name-Book,'
				in which all the names of the people were written down, with an account
				of their forefathers and of any notable things which they had done.
				</p>
				<details>
					<summary>Test 1</summary>
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?</p>
				</details>
				<details>
					<summary>Test 2</summary>
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?</p>
				</details>
			</details>
		</div>
	</div>
	<details class="mrgn-bttm-md">
		<summary>View code</summary>
		<pre><code>&lt;div class=&quot;wb-tabs ignore-session&quot;&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;details id=&quot;details-panel10&quot;&gt;
			&lt;summary&gt;Example 1&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		&lt;details id=&quot;details-panel20&quot;&gt;
			&lt;summary&gt;Example 2&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
	</details>

	<h2>Example 3</h2>
	<p>With a large number of tabs, managed by a horizontal scroll bar</p>
	<div class="wb-tabs">
		<div class="tabpanels">
			<details id="details-panel100">
				<summary>Example 1</summary>
				<p>
				From time immemorial the Norsemen <a href="#details-panel300">Example 3</a> were among the most daring and
				skilful mariners ever known. They built great wooden boats with tall,
				sweeping bows and sterns. These ships, though open and without decks,
				were yet stout and seaworthy. Their remains have been found, at times
				lying deeply buried under the sand and preserved almost intact. One
				such vessel, discovered on the shore of Denmark, measured 72 feet in
				length. Another Viking ship, which was dug up in Norway, and which is
				preserved in the museum at Christiania, was 78 feet long and 17 feet
				wide. One of the old Norse sagas, or stories, tells how King Olaf
				Tryggvesson built a ship, the keel of which, as it lay on the grass,
				was 74 ells long; in modern measure, it would be a vessel of about 942
				tons burden. Even if we make allowance for the exaggeration or
				ignorance of the writer of the saga, there is still a vast contrast
				between this vessel and the little ship Centurion in which Anson sailed
				round the world.
				</p>
			</details>
			<details id="details-panel200">
				<summary>Example 2</summary>
				<p>
				It is needless, however, to prove that the Norsemen could have reached
				America in their ships. The voyages from Iceland to Greenland which we
				know they made continually for four hundred years were just as arduous
				as a further voyage from Greenland to the coast of Canada.
				</p>
				<details>
					<summary>Test</summary>
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?</p>
				</details>
			</details>
			<details id="details-panel300">
				<summary>Example 3</summary>
				<p>
				The story of the Norsemen runs thus. Towards the end of the ninth
				century, or nearly two hundred years before the Norman conquest, there
				was a great exodus or outswarming of the Norsemen from their original
				home in Norway. A certain King Harold had succeeded in making himself
				supreme in Norway, and great numbers of the lesser chiefs or jarls
				preferred to seek new homes across the seas rather than submit to his
				rule. So they embarked with their seafaring followers—Vikings, as we
				still call them—often, indeed, with their wives and families, in great
				open ships, and sailed away, some to the coast of England, others to
				France, and others even to the Mediterranean, where they took service
				under the Byzantine emperors. But still others, loving the cold rough
				seas of the north, struck westward across the North Sea and beyond the
				coasts of Scotland till they reached Iceland. This was in the year 874.
				Here they made a settlement that presently grew to a population of
				fifty thousand people, having flocks and herds, solid houses of stone,
				and a fine trade in fish and oil with the countries of Northern Europe.
				These settlers in Iceland attained to a high standard of civilization.
				They had many books, and were fond of tales and stories, as are all
				these northern peoples who spend long winter evenings round the
				fireside. Some of the sagas, or stories, which they told were true
				accounts of the voyages and adventures of their forefathers; others
				were fanciful stories, like our modern romances, created by the
				imagination; others, again, were a mixture of the two. Thus it is
				sometimes hard to distinguish fact and fancy in these early tales of
				the Norsemen. We have, however, means of testing the stories. Among the
				books written in Iceland there was one called the 'National Name-Book,'
				in which all the names of the people were written down, with an account
				of their forefathers and of any notable things which they had done.
				</p>
				<details>
					<summary>Test 1</summary>
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?</p>
				</details>
				<details>
					<summary>Test 2</summary>
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?</p>
				</details>
			</details>
			<details id="details-panel400">
				<summary>Example 4</summary>
				<p>
				In today’s rapidly shifting landscape, resilience and foresight have become essential traits for success. Teams that cultivate open communication and embrace diverse perspectives are better equipped to navigate uncertainty. Progress isn’t always linear—it often requires recalibration, reflection, and a willingness to challenge the status quo. The most impactful organizations are those that prioritize purpose alongside performance, recognizing that long-term value stems from meaningful engagement and ethical decision-making. As technology accelerates and global challenges intensify, our ability to adapt, collaborate, and innovate will define the future. Growth is not just about expansion; it’s about evolution, and the courage to lead with intention.
				</p>
			</details>
			<details id="details-panel500">
				<summary>Example 5</summary>
				<p>
				Success in any field is rarely the result of chance—it’s built on intention, consistency, and a clear sense of purpose. Teams that align around shared values and long-term goals tend to outperform those focused solely on short-term gains. When individuals feel empowered to contribute meaningfully, creativity flourishes and collaboration deepens. The most effective leaders understand that progress is a collective effort, shaped by trust, transparency, and a willingness to listen.
				</p>
			</details>
			<details id="details-panel600">
				<summary>Example 6</summary>
				<p>
				Innovation doesn’t always arrive with fanfare. Sometimes, it begins quietly—in a conversation, a sketch, or a moment of curiosity. The most transformative ideas often emerge from asking simple questions and daring to explore unconventional answers. In today’s fast-paced world, the ability to pause, reflect, and reimagine is more valuable than ever. It’s not just about keeping up; it’s about looking ahead with purpose. Whether you're building a product, shaping a policy, or leading a team, clarity of vision and adaptability are essential. Progress isn’t measured only by speed, but by the depth of impact and the integrity of the journey. When we prioritize thoughtful action over reactive motion, we create space for meaningful change. And in that space, real progress begins.
				</p>
			</details>
			<details id="details-panel700">
				<summary>Example 7</summary>
				<p>
				Great ideas often start small. A passing thought, a quick sketch, or a casual conversation can spark something bigger. What matters is the willingness to explore, refine, and act. Progress isn’t always fast or flashy—it’s built through steady effort and thoughtful decisions. Whether you're launching a new initiative or improving an existing one, staying curious and open to change makes all the difference. In the end, it’s not about perfection. It’s about momentum and purpose.
				</p>
			</details>
			<details id="details-panel800">
				<summary>Example 8</summary>
				<p>
				Momentum is built through small, consistent actions. It’s not always about making big moves, but about showing up, staying focused, and refining your approach over time. The most effective teams understand that progress is a process, not a moment. They value clarity, communication, and the ability to pivot when needed. Whether you're launching a new initiative or improving an existing one, success often comes from the quiet work behind the scenes. With patience and purpose, even the smallest steps can lead to meaningful outcomes.
				</p>
			</details>
			<details id="details-panel900">
				<summary>Example 9</summary>
				<p>
				Every challenge presents a chance to grow. Whether it’s a tight deadline, a complex problem, or an unexpected shift in direction, how we respond defines the outcome. The most effective teams don’t just react—they reflect, recalibrate, and move forward with purpose. Progress isn’t about avoiding obstacles; it’s about learning to navigate them with resilience and creativity. When people feel supported and empowered, they rise to meet the moment. And in those moments, real transformation begins—not just in the work, but in the people behind it.
				</p>
			</details>
			<details id="details-panel1000">
				<summary>Example 10</summary>
				<p>
				Not every solution needs to be complex. Sometimes, the most effective answers come from simplifying the problem and focusing on what truly matters. Clear goals, open communication, and a willingness to iterate can turn even the most daunting tasks into manageable steps. When teams trust each other and stay aligned, progress becomes not just possible, but sustainable. It’s not about doing everything at once—it’s about doing the right things, one step at a time.
				</p>
			</details>
			<details id="details-panel1100">
				<summary>Example 11</summary>
				<p>
				Ideas gain momentum when they’re shared. A single insight can spark a conversation, shift a perspective, or inspire a new direction. The most impactful work often begins with a question: What if we tried something different? When teams embrace curiosity and stay open to feedback, they create space for innovation to flourish. It’s not about having all the answers—it’s about being willing to explore them together. In that shared pursuit, creativity becomes a collective force.
				</p>
			</details>
			<details id="details-panel1200">
				<summary>Example 12</summary>
				<p>
				True progress often begins with a shift in mindset. It’s not always about doing more, but about doing what matters most. When we take the time to focus, prioritize, and align our actions with our values, we create work that resonates. Distractions are everywhere, but clarity cuts through the noise. Whether you're building something new or refining what already exists, intention is everything. The best outcomes aren’t rushed—they’re shaped by patience, purpose, and a willingness to grow through the process.
				</p>
			</details>
			<details id="details-panel1300">
				<summary>Example 13</summary>
				<p>
				Every team has its rhythm. Some move fast, others take a more deliberate pace. What matters most is alignment—knowing where you're headed and why. When people understand the purpose behind their work, motivation becomes intrinsic. It’s not just about hitting targets; it’s about creating something that lasts. The best results come from collaboration, trust, and a shared commitment to excellence. In that space, creativity thrives, and even the most ambitious goals start to feel within reach.
				</p>
			</details>
			<details id="details-panel1400">
				<summary>Example 14</summary>
				<p>
				Every goal begins with a decision to start. It doesn’t require perfection, just momentum. The first draft, the first meeting, the first step—they all matter more than waiting for the “right” moment. Progress is built through action, reflection, and refinement. When teams commit to moving forward together, even small efforts compound into meaningful results. It’s not about having everything figured out—it’s about showing up, staying curious, and trusting the process to lead somewhere worthwhile.
				</p>
			</details>
		</div>
	</div>
	<details class="mrgn-bttm-md">
		<summary>View code</summary>
		<pre><code>&lt;div class=&quot;wb-tabs&quot;&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;details id=&quot;details-panel100&quot;&gt;
			&lt;summary&gt;Example 1&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		&lt;details id=&quot;details-panel200&quot;&gt;
			&lt;summary&gt;Example 2&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		...
		&lt;details id=&quot;details-panel1400&quot;&gt;
			&lt;summary&gt;Example 14&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
	</details>
</section>
